<template>
  <div class="wrap">
    <Form :model="formState" :label-width="80">
      <FormItem label="标题:">
        <Input
          v-model="formState.title"
          placeholder="Enter something..."
        ></Input>
      </FormItem>
      <FormItem label="封面:">
        <Input
          v-model="formState.coverImage"
          placeholder="Enter something..."
        ></Input>
      </FormItem>
      <FormItem label="链接:">
        <Input
          v-model="formState.url"
          placeholder="Enter something..."
        ></Input>
      </FormItem>
      <FormItem label="上传视频:">
        <upload class="upload" @uploadSuccess="handleSuccess"></upload>
      </FormItem>
      
    </Form>
    <div class="btn">
      <Button type="primary" @click="handle">发布</Button>
    </div>
  </div>
</template>

<script>
import upload from "@/components/upload/upload.vue";

export default {
  components:{
    upload
  },
  data() {
    return {
      formState: {
        url:''
      },
    };
  },
  methods: {
    handle(){
      this.HttpService.postVideo(this.formState).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$Message.success(res.message);
          this.formState = {}
        }
      })
    },
    // upload
    handleSuccess(msg){
      console.log(msg)
      if(msg.code == 0){
        // 立即设置会报404,可能还没获取到资源,因此延迟1s加载
        setTimeout(() =>{
          let url = 'https://localhost:3333' + msg.finalPath + '.mp4'
          this.formState.url = url
          console.log(url);
        },1000)
      }
    },
  },
};
</script>

<style lang='less' scoped>
.wrap {
  margin-top: 20px;
  padding-right: 50px;
  .btn{
    text-align: center;
  }
  .upload{
    margin-left: 25px;
    margin-bottom: 50px;
  }
}
</style>
